<template>
    <div class="content">
        <div class="list_hot">
            <div class="Card-header_card">
                <div class="card-title">
                    <img width="27" height="30" src="https://yyfuns.com/static/Sand1.png" alt="">
                    <span class="title_SE4va" :style="lang == 'en' ? 'font-size:17px;' : ''">{{ $t('Sand_sculpture') }}</span>
                    <a @click="$router.push(url_hot)" target="_blank">
                        <span class="more">
                            <span>{{ $t('more') }}</span>
                            <el-icon><ArrowRight /></el-icon>
                        </span>
                    </a>
                </div>
                <div class="main">
                    <div class="list-inner">
                        <div class="list_item" v-for="item in theaterBannerList" :key="item.id">
                            <a @click="$router.push(url_sand+'?id='+item.id)"  target="_blank">
                                <div class="list_item_img">
                                    <!-- <img width="100%" height="136" :src="$baseUrl+item.banner_img" alt=""> -->
                                    <video autoplay loop muted width="100%" height="136" :src="item.episode_content" :poster="$baseUrl+item.banner_img"></video>
                                </div>
                                <div class="card-content-title">
                                    <p>{{ item.theater_name }}</p>
                                    <div class="time">
                                        <div class="episode">{{item.sum_episode}}集全</div>
                                        <div class="sum_time">{{formatDuration(item.sum_time)}}</div>
                                    </div>
                                </div>
                            </a>
                            <div class="tag" v-if="item.is_free == 1">免費</div>
					        <div class="tagVip" v-if="item.is_free !== 1 && item.is_free !== 2">付費</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        
    </div>
</template>

<script setup>
import axios from '@/utils/api'
const url_hot = '/home/SandSculpture'
const url_sand = '/home/SandSculptureMain/'


const theaterBannerList = ref([])
const getTheaterBannerList = async () => {
    const res = await axios.get('/theaterBannerList')
    if (res.code == 200) {
        theaterBannerList.value = [res.data.data[0]]
    } else {
        ElMessage.error(res.message)
    }
}
getTheaterBannerList()

const lang = ref('')
if(localStorage.getItem('lang') == 'en'){
    lang.value = 'en'
}else{
    lang.value = 'zh'
}

const formatDuration = (seconds) => {
    seconds = Number(seconds);
    if (isNaN(seconds) || seconds < 0) return '00:00';

    const h = Math.floor(seconds / 3600);
    const m = Math.floor((seconds % 3600) / 60);
    const s = seconds % 60;

    const pad = (n) => String(n).padStart(2, '0');

    if (h > 0) {
        return `${pad(h)}:${pad(m)}:${pad(s)}`;
    } else {
        return `${pad(m)}:${pad(s)}`;
    }
};
</script>

<style lang="less" scoped>
.content {
    width: 90%;
    // height: 500px;
    // background-color: rgb(34, 192, 165);
    margin-top: 16px;
    .list_hot{
    
        margin-bottom: 20px;
        .card-title{
            position: relative;
            display:flex;
            align-items: center;
            img{
                margin-right: 10px;
                margin-left: 0;
            }
        }
        .title_SE4va{
            font-size: 23px;
            font-weight: bold;
            background: linear-gradient(90deg, #ff7e5f, #feb47b); /* 渐变背景 */
            -webkit-background-clip: text; /* 文字渐变 */
            background-clip: text;
            color: transparent; /* 隐藏原文字颜色 */
            letter-spacing: 1px;
            line-height: 32px;
            position: relative;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); /* 文字阴影 */
            filter: brightness(1.1);
            margin-left: 0;
        }
        // .title_SE4va::before{
        //     content: '📋'; /* 图标装饰 */
        //     margin-right: 10px;
        //     background: transparent !important;
        //     color: @primary-color;
        // }
        .more{
            font-size: 12px;
            color: rgba(0, 0, 0, .6);
            position: absolute;
            right: 0;
            top: 3px;
            border: 1px solid rgba(0, 0, 0, .2);
            height: 22px;
            line-height: 22px;
            padding: 0 7px;
            border-radius: 6px;
            cursor: pointer;
            display: flex;
            align-items: center;
        }
        .more:hover{
            background-color: rgb(241, 241, 241);
            
        }
        .main{
            .main_item{
                display: flex;
                margin-top: 20px;
              
                .list-item-num{
                    flex: 0.5;
                }
                .num{
                    width: 48px;
                    height: 48px;
                    line-height: 48px;
                    text-align: center;
                    font-weight: 700;
                    font-size: 20px;
                    color: rgba(0, 0, 0, .35);
                }
                .list_right{
                    padding-bottom: 8px;
                    border-bottom: 1px solid rgba(0, 0, 0, .2);
                    display: flex;
                    flex: 3;
                    .list_right_r{
                        flex: 3;
                        .label span{
                            border: 1px solid rgba(0, 0, 0, .35);
                            margin-right: 5px;
                            padding: 1px 5px;
                            font-size: 12px;
                            border-radius: 10px;
                            cursor: pointer;
                        }
                        .label span:hover{
                            border: 1px solid rgb(11, 145, 241);
                        }
                    }
                    .list_right_r p{
                        font-size: 13px;
                        margin-bottom: 8px;
                    }
                    .name:hover{
                        color: rgb(11, 145, 241);
                        cursor: pointer;
                    }
                    
                }
                
                .list_right img{
                    border-radius: 14px;
                }

                
            }
            .main_item:last-child{
                .list_right{
                    border: none;
                }
                
            }
        }

        .list-inner {
            .list_item {
                box-sizing: border-box;
                border: 1px solid rgba(0, 0, 0, .1);
                border-radius: 10px;
                margin: 16px 0;
                transition: .3s;
                cursor: pointer;
                flex: 0.24;
                position: relative;
                .list_item_img{
                    overflow: hidden;
                    border-radius: 10px 10px 0 0;
                    display: flex;
                    video{
                        object-fit: cover;
                    }
                }
                .list_item_img img{
                    border-radius: 10px 10px 0 0;
                    transition: all .3s;
                    &:hover{
                        transform: scale(1.15);
                    }
                }
                a{
                    text-decoration: none;
                }
                .card-content-title{
                    padding: 10px;
                    p{
                        color: rgba(0, 0, 0, .85);
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                    p:hover{
                        color: #1890ff;
                    }
                    .time{
                        font-size: 13px;
                        color: rgba(0, 0, 0, .5);
                        margin-top: 10px;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        *{
                            margin: 0;
                        }
                    }
                }
                .tag {
					background: linear-gradient(to right, #adf4cc, #60e8a1);
					display: inline-block;
					position: absolute;
					right: 0;
					top: 0;
					width: 36px;
                    height: 18px;
                    line-height: 18px;
					text-align: center;
					padding: 1px 5px;
					border-radius: 0 10px 0 10px;
					font-size: 13px;
				}

				.tagVip {
					background: linear-gradient(to right, #fce7b4, #fab660);
					display: inline-block;
					position: absolute;
					right: 0;
					top: 0;
					width: 36px;
                    height: 18px;
                    line-height: 18px;
					text-align: center;
					padding: 1px 5px;
					border-radius: 0 10px 0 10px;
					font-size: 13px;
				}
                
            }
        }

        .announcement{
            width: 100%;
            // height: 300px;
            // background-color: #1890ff;
            margin-top: 10px;
            .list_con {
                a{
                    text-decoration: none;
                    color: #000;
                }
                padding: 5px 0;
                li{
                    list-style: none;
                    margin-bottom: 10px;
                    border-bottom: 1px solid #d9d9d9;
                    height: 30px;
                    cursor: pointer;
                    span{
                        float: right;
                        font-size: 13px;
                        line-height: 22px;
                        color: #7d7d7d;
                    }
                }
                li:hover{
                    color: #1890ff;
                    span{
                        color: #1890ff;
                    }
                    
                }
                p{
                    width: 57%;
                    margin-left: 0;
                    float: left;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }
        }
    }
}
</style>